{% extends 'admin/admin_base.html' %}

{% block title %}上传试卷 - 后台管理系统{% endblock %}

{% block nav_exams %}active{% endblock %}

{% block content %}
<div class="container mt-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h2>上传试卷</h2>
        <a href="{{ url_for('admin.exam_list') }}" class="btn btn-secondary">
            <i class="bi bi-arrow-left"></i> 返回列表
        </a>
    </div>

    <div class="row">
        <div class="col-md-8">
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="card-title mb-0">批量上传试卷</h5>
                </div>
                <div class="card-body">
                    <form method="post" enctype="multipart/form-data" class="needs-validation" novalidate>
                        <div class="mb-3">
                            <label for="exam_file" class="form-label">上传试卷文件</label>
                            <input type="file" class="form-control" id="exam_file" name="exam_file" required accept=".csv, .xlsx, .xls, .zip">
                            <div class="invalid-feedback">
                                请选择要上传的试卷文件
                            </div>
                            <div class="form-text">
                                支持格式：CSV, Excel文件 (.xlsx, .xls) 或 ZIP文件 (包含Excel和图片)
                            </div>
                        </div>

                        <div class="mb-3">
                            <label for="difficulty" class="form-label">难度等级</label>
                            <div class="difficulty-rating">
                                {% for i in range(1, 6) %}
                                <div class="form-check form-check-inline">
                                    <input class="btn-check" type="radio" name="difficulty" 
                                        id="difficulty{{ i }}" value="{{ i }}" 
                                        {% if i == 3 %}checked{% endif %}>
                                    <label class="btn btn-outline-primary" for="difficulty{{ i }}">
                                        {% for _ in range(i) %}★{% endfor %}{% for _ in range(5-i) %}☆{% endfor %}
                                    </label>
                                </div>
                                {% endfor %}
                            </div>
                            <div class="form-text">
                                选择试卷的难度等级，默认为中等难度（3星）
                            </div>
                        </div>

                        <div class="text-end">
                            <button type="submit" class="btn btn-primary">
                                <i class="bi bi-upload"></i> 上传试卷
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <div class="col-md-4">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">使用说明</h5>
                </div>
                <div class="card-body">
                    <p>通过上传Excel或CSV文件批量创建试卷，文件需包含以下列：</p>
                    <ul>
                        <li><strong>题目类型</strong>：single（单选题）、multiple（多选题）、boolean（判断题）</li>
                        <li><strong>题目内容</strong>：题目的具体描述</li>
                        <li><strong>选项</strong>：选项内容，用分号(;)分隔不同选项，判断题可留空</li>
                        <li><strong>正确答案</strong>：
                            <ul>
                                <li>单选题：正确选项的索引（从0开始）</li>
                                <li>多选题：正确选项的索引，用逗号分隔（如"0,2"）</li>
                                <li>判断题：true或false</li>
                            </ul>
                        </li>
                        <li><strong>科目</strong>：试卷所属科目</li>
                        <li><strong>试卷名称</strong>：试卷的名称</li>
                        <li><strong>图片文件名</strong>：（可选）题目关联的图片文件名</li>
                    </ul>
                    
                    <div class="alert alert-info">
                        <h6><i class="bi bi-image"></i> 如何上传带图片的试题：</h6>
                        <ol>
                            <li>在Excel中添加"图片文件名"列，填入图片的文件名（如"python_logo.png"）</li>
                            <li>将Excel文件和所有图片文件打包成ZIP文件</li>
                            <li>上传这个ZIP文件</li>
                        </ol>
                    </div>
                    
                    <div class="d-grid gap-2">
                        <a href="{{ url_for('upload_exam.download_template') }}" class="btn btn-success">
                            <i class="bi bi-download"></i> 下载模板
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    // 表单验证
    (function() {
        'use strict'
        
        // 获取所有需要验证的表单
        var forms = document.querySelectorAll('.needs-validation')
        
        // 循环它们并阻止提交
        Array.prototype.slice.call(forms)
            .forEach(function(form) {
                form.addEventListener('submit', function(event) {
                    if (!form.checkValidity()) {
                        event.preventDefault()
                        event.stopPropagation()
                    }
                    
                    form.classList.add('was-validated')
                }, false)
            })
    })()
</script>
{% endblock %}
